@material-ui/utils

What is @material-ui/utils?

The @material-ui/utils package provides a collection of utility functions and helpers designed for use with Material-UI, a popular React UI framework. These utilities help with common tasks in application development such as event handling, component styling, and theme customization.

What are @material-ui/utils's main functionalities?

useControlled

This utility helps manage the state of controlled and uncontrolled components, making it easier to implement components that can operate in both modes.

import { useControlled } from '@material-ui/utils';
const [value, setValue] = useControlled({
  controlled: controlledProp,
  default: defaultValue,
});

useEventCallback

Ensures the stability of event handlers across re-renders, which can be particularly useful in components that rely on stable references to functions.

import { useEventCallback } from '@material-ui/utils';
const handleClick = useEventCallback((event) => {
  // handle the event
});

getScrollbarSize

This function calculates the size of the scrollbar on the page, which can be useful for adjusting layout or compensating for scrollbars in overflow scenarios.

import { getScrollbarSize } from '@material-ui/utils';
const scrollbarWidth = getScrollbarSize();

Other packages similar to @material-ui/utils

lodash

Lodash is a comprehensive utility library offering a wide range of functions for tasks like array manipulation, object handling, and function utilities. While it covers a broader scope than @material-ui/utils, it doesn't provide utilities specifically tailored for UI development or integration with Material-UI.

recompose

Recompose provides a toolkit for building higher-order components in React. It offers utilities for component logic and state management, similar to some of the functionality in @material-ui/utils. However, Recompose focuses more on the component pattern and less on the specific needs of Material-UI.

README

@material-ui/utils

Shared utilities used by Material-UI packages.

Changelog

@mui/base@5.0.0-beta.53

• [Autocomplete] Add new AutocompleteInputChangeReason (#37301) @binh1298

Docs

• Replace v6 "alpha" mentions with "beta" (#42895) @DiegoAndai
• Fix typos (#42862) @omahs
• Fix issues reported by react compiler in docs folder (#42881) @sai6855
• Fix 301 @oliviertassinari
• [LinearProgress] Fix buffer demo (#42858) @mbrookes
• Adjust site to add Toolpad on the homepage (#38604) @bharatkashyap

Core

• Fix imports in Demo component (#42857) @LukasTy
• Use @mui/docs/HighlightedCodeWithTabs in markdown (#42841) @Janpot
• Simpler pnpm dedupe error message to act on @oliviertassinari
• Fix split infinitive use in tests @oliviertassinari
• [lab] Fix issues reported by react-compiler in mui-lab (#42880) @sai6855

All contributors of this release in alphabetical order: @bharatkashyap, @brijeshb42, @DiegoAndai, @Janpot, @lhilgert9, @LukasTy, @mbrookes, @oliviertassinari, @omahs, @romgrk, @sai6855, @ZeeshanTamboli